<template>
  <div>
    <z-table
      ref="tableRef"
      :url="userListApi"
      :columns="columns"
      :aticonGroups="aticonGroups"
      :filterGroups="filterGroups"
      @delete="handleDelete"
      @rowClick="handleRowClick"
      @add="add"
      @edit="edit"
      noDefaultDelete
      :formList="formList"
      addFormLabel="新增用户"
      editFormLabel="编辑用户"
    >
      <template #avatar="{ record }">
        <img :src="record.avatar" alt="" />
      </template>
      <template #action_left="{ record }">
        <a-button status="normal">action_left</a-button>
      </template>
      <template #action_right="{ record }">
        <a-button status="normal">action_right</a-button>
      </template>
      <template #search_other>
        <a-button status="normal">search_other</a-button>
      </template>
    </z-table>
    <!-- <z-modal-form
      ref="modalFormRef"
      @cancel="handleCancel"
      @create="handleModalCreateOk"
      @update="handleModalUpdateOk"
      v-model:visible="visible"
      :formList="formList"
      addLabel="新增用户"
      editLabel="编辑用户"
    >
      <template #remrak_help="{ value, record }"> -->
    <!-- {{ value }} {{ record }} -->
    <!-- <span v-if="value === '?'">
          <a href="https://www.baidu.com">详情参考</a>
        </span>
      </template>
      <template #background="{ record, form }">
        <a-select
          v-model="form[record.field]"
          :options="[
            {
              label: '图1',
              value: 1,
            },
            {
              label: '图2',
              value: 2,
            },
          ]"
        ></a-select>
      </template> -->
    <!-- <template #footer="{ form }">自定义底部</template> -->
    <!-- </z-modal-form> -->
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import ZTable from "@/components/admin/table/index.vue";
import { userGenderOptionsApi, userListApi } from "@/api/user";
import type { columnType } from "@/components/admin/table/index.vue";
import ZModalForm, {
  type formItemType,
} from "@/components/admin/modalForm/index.vue";
const tableRef = ref();
const modalFormRef = ref();
const visible = ref(false);
const formList = reactive<formItemType[]>([
  {
    label: "背景图",
    field: "background",
    editshow: false,
    editable: true,
  },
  {
    label: "用户名",
    type: "input",
    field: "username",
    rules: { required: true },
    validateTrigger: "blur",
    editshow: true,
    editable: true,
  },
  {
    label: "密码",
    type: "password",
    field: "password",
    rules: { required: true },
    validateTrigger: "blur",
    editshow: false,
  },
  {
    label: "介绍",
    type: "textarea",
    field: "remrak",
    rules: { required: true },
    validateTrigger: "blur",
    autoSize: {
      minRows: 2,
      maxRows: 4,
    },
    editshow: true,
    editable: true,
  },
  {
    label: "性别",
    source: userGenderOptionsApi,
    type: "select",
    field: "gander",
    rules: { required: true },
    validateTrigger: "blur",
    editshow: true,
  },
  {
    label: "爱好",
    source: [
      { label: "篮球", value: 1 },
      { label: "排球", value: 2 },
    ],
    type: "select",
    field: "likes",
    rules: { required: true },
    validateTrigger: "blur",
    multiple: true,
    editshow: true,
    editable: true,
  },
  {
    label: "角色",
    source: [
      { label: "管理员", value: 1 },
      { label: "普通用户", value: 2 },
    ],
    type: "radio",
    field: "role",
    rules: { required: true },
    validateTrigger: "blur",
    editshow: true,
    editable: true,
  },
  {
    label: "开启验证",
    type: "swicth",
    field: "enable",
    rules: { required: true },
    validateTrigger: "blur",
    editshow: true,
    editable: true,
  },
]);

const edit = (record: any) => {
  console.log(record, "record");
  modalFormRef.value.setForm(record);
  visible.value = true;
};
const add = () => {
  console.log("add");
  visible.value = true;
};

// const handleCancel = (val: boolean) => {
//   visible.value = false;
// };
// const handleModalCreateOk = (formData: any, fn: any) => {
//   console.log(formData, "createformData");
//   fn(false);
// };
// const handleModalUpdateOk = (formData: any, fn: any) => {
//   console.log(formData, "updateformData");
//   fn(false);
// };

const columns: columnType[] = [
  {
    title: "ID",
    dataIndex: "userID",
  },
  {
    title: "用户名",
    dataIndex: "username",
  },
  {
    title: "昵称",
    dataIndex: "nickname",
    //   slotName: "nickname",
  },
  {
    title: "时间1",
    slotName: "created_at",
    dateFormat: "current",
    //   slotName: "nickname",
  },
  {
    title: "头像",
    slotName: "avatar",
    //   slotName: "nickname",
  },
  // {
  //   title: "昵称",
  //   slotName: "nickname",
  // },
  {
    title: "操作",
    slotName: "action",
  },
];

const aticonGroups = [
  {
    label: "批量升级",
    callback: (keyList: string[] | number[]) => {
      console.log("批量升级", keyList);
      keyList = [];
    },
  },
];
const filterGroups = [
  {
    label: "角色过滤",
    source: [
      { label: "管理员", value: 1 },
      { label: "用户", value: 2 },
    ],
    column: "role",
    width: 200,
    callback: (value: number | string) => {
      console.log(value, "父组件");
      console.log(tableRef.value.data, "data");
      tableRef.value?.getList({ role: value });
    },
  },
  {
    label: "性别过滤",
    source: userGenderOptionsApi,
    column: "gender",
    width: 200,
    // callback: (value: number | string) => {
    //   console.log(value, "父组件");
    // },
  },
];

const handleDelete = (idList: number[] | string[]) => {
  console.log(idList, "id");
};

const handleRowClick = (record: any) => {
  // console.log(record, "行触发");
};
</script>
<style scoped lang="less"></style>
